<template>
	<view class="container">

		<!-- 服务商认证的状态栏 -->
		<view class="statusContent">
			<certifyProgress :applyStatus="applyStatus" :isChoose="isChoose" :status1="status_1" :status2="status_2"
				:status3="status_3" :status4="status_4"></certifyProgress>
		</view>

		<!-- 状态1 -->
		<!-- 选择云集服务商或者区县级服务商的区域 -->
		<block v-if="applyStatus==-1">
			<view class="selectServiceArea">
				<view class="banner" :class="status !=1 ? 'cloudServiceDefault' : 'cloudServiceActive'"
					@click="selectType(1)">
				</view>

				<view class="banner" :class="status !=2 ? 'districtServiceDefault' : 'districtServiceActive'"
					@click="selectType(2)">
				</view>
				<view class="nextStep" @click="toBeServe()">
					下一步
				</view>
			</view>
		</block>



		<!-- 状态二上传 -->
		<!-- 上传打营业执照 -->
		<block v-if="applyStatus==0||applyStatus==1||applyStatus==-2">
			<view class="uploadPayment">
				<!-- 第一行上传营业执照的部分 -->
				<view class="upload">
					<view class="uploadTitle">
						上传你的营业执照
					</view>
					<view class="uploadOprate" @click="uploadLicense()">
						{{uploadStatusText}}
					</view>
				</view>
				<!-- 下方的上传提示信息 -->
				<view class="hintInfo">
					<view class="iconContentError" v-if="applyStatus===-2">

					</view>
					<view class="iconContentNormal" v-else>

					</view>

					<view class="textContent">
						<view class="erroMsg" v-if="applyStatus===-2">
							<view class="text">
								审核未通过
							</view>
							<view class="text">
								{{errMsg}}
							</view>
						</view>
						<block class="normal" v-else>
							<view class="text">
								请确保上传图片内容清晰
							</view>
							<view class="text">
								1-3三个工作日审核内完成
							</view>

						</block>

					</view>
				</view>


			</view>

			<!-- 地址填写区域 -->
			<view class="areaContent" @click="toEditServiceAddress()">
				<view class="iconContent">
					<uni-icons type="location-filled" size="25" color="rgba(223, 161, 60, 1)"
						style="text-align: center;"></uni-icons>
				</view>
				<view class="areaInfo">
					<view class="areaTitle">
						{{addressInfo}}
					</view>
					<view class="personInfo">
						<view class="textContent">
							<view class="person" v-if="isEmpty(DefaultaddressData)">
								点击填写
							</view>
							<view class="person" v-else>
								<text class="name">{{DefaultaddressData.serverAddressConsigneeName}}</text>
								<text class="phone">{{DefaultaddressData.serverAddressConsigneePhone}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="icon">
					<uni-icons type="forward" size="15"></uni-icons>
				</view>
			</view>

			<!-- 底部提示信息	 -->
			<view class="bottomLine" v-if="true">
				<view class="iconContent">

				</view>
				<view class="text">
					提货地址一个月仅能修改一次
				</view>
			</view>

			<!-- 提交操作按钮 -->
			<view class="confirmOperate" v-if="applyStatus!=1" @click="confirmUploadLciense()">
				提交
			</view>
		</block>




		<!-- 状态三下单 -->
		<!-- 商品下单区域 -->

		<view class="goodPurchaseArea" v-if="applyStatus===2">
			<!-- 商品列表 -->
			<view class="goodsList" v-if="true">
				<view class="goodItem" v-for="item in goodsList">
					<view class="goodImage">
						<image :src="item.productTopImg[0]" mode="aspectFill"></image>
					</view>
					<view class="goodDesc">
						<view class="goodName">
							{{item.productName}}
						</view>

						<view class="discount">
							{{discountText()}}
						</view>
						<view class="priceAndNum">
							<!-- 价格区域 -->
							<view class="price">
								<view class="nowPrice">
									￥{{caluateDiscount(item.productPrice)}}
								</view>

								<view class="prePrice">
									￥{{item.productPrice}}
								</view>


							</view>
							<!-- 进步器区域 -->
							<view class="steeper">
								<view class="goodsQuantity" v-if="isInSelected(item.id)">
									{{isInSelected(item.id)}}
								</view>

								<view class="specitionSelect" @click="openGaugeCard(item.id,item.productName)">
									规格选择
								</view>
							</view>

						</view>


					</view>
				</view>

			</view>


			<!-- 提货清单 -->
			<view class="replishListArea" v-if="isOpenList">
				<view class="title">
					进货清单明细
				</view>
				<view class="delete" @click="clearList()">
					<view class="icon">

					</view>
					<view class="textDesc">
						清空
					</view>
				</view>



				<view class="empty" v-if="selectedList.length===0">
					<view class="text">
						暂未添加任何商品
					</view>
					<view class="text">
						快去选购吧
					</view>
				</view>

				<view class="replishList">
					<view class="goodItem" v-for="subItem in selectedList">
						<view class="goodImage">
							<image :src="subItem.productDetailImg" mode="aspectFill"></image>
						</view>
						<view class="goodDesc">
							<view class="goodName">
								{{subItem.productName}}
							</view>

							<view class="discount">
								{{subItem.productDetailSpecifications}}
							</view>

							<view class="priceAndNum">
								<!-- 价格区域 -->
								<view class="price">
									<view class="nowPrice">
										￥{{caluateDiscount(subItem.productDetailPrice)}}
									</view>

									<view class="prePrice">
										￥{{subItem.productDetailPrice}}
									</view>


								</view>
								<!-- 进步器区域 -->
								<view class="steeper">
									<steeper :itemNum="subItem.quantity" :toZero="true"
										@add="num=>toAdd(num,subItem.id)" @minus="num=>toMinus(num,subItem.id)"
										@blur="num=>toBlur(num,subItem.id)">
									</steeper>

								</view>

							</view>


						</view>
					</view>

				</view>


			</view>


			<!-- 底部的提交订单 -->
			<view class="orderFooter">
				<view class="title" @click="operateList()">
					进货清单
					<view class="icon" :class="isOpenList==false?'up':'down'">

					</view>
				</view>

				<view class="priceArea">
					<view class="totalPrice">
						￥{{caluateDiscount(totalPrice)}}
					</view>
					<view class="originPrice">
						{{totalPrice.toFixed(2)}}
					</view>
				</view>


				<view class="confirmButton" @click="toOrderConfirm()">
					提交订单
				</view>

				<view class="serviceDesc">
					{{serviceDescText()}}
				</view>

			</view>

			<!-- 商品的规格卡片 -->
			<view class="specificCard" v-if="isPopUp">
				<view class="goodName">
					{{productName}}
				</view>

				<!-- 规格按钮组 -->
				<view class="specifiBox">
					<view class="title">
						规格
					</view>
					<view class="speciBtns">
						<view class="btnItem" @click="changeSubItem(subInfo.id)"
							:class="subInfo.id===selectedSubItem.id? 'selected':'unSelected' "
							v-for="subInfo in subProductList">
							<view class="specDesc">
								{{subInfo.productDetailSpecifications}}
							</view>

							<view class="specPrice">
								￥{{caluateDiscount(subInfo.productDetailPrice) }}
							</view>
						</view>
					</view>
				</view>

				<view class="footOperate">
					<view class="totalPrice">
						<view class="title">
							小计
						</view>
						<view class="Price">
							￥{{caluateDiscount(selectedSubItem.productDetailPrice)}}
						</view>
					</view>
					<view v-for="sub in subProductList" v-if="(sub.id===selectedSubItem.id)">
						<steeper :toZero="true" v-if="getSeleItemNum(selectedSubItem.id)&&(sub.id===selectedSubItem.id)"
							:itemNum="getSeleItemNum(selectedSubItem.id)===false?0:getSeleItemNum(selectedSubItem.id)"
							@add="num=>toAdd(num,selectedSubItem.id)" @minus="num=>toMinus(num,selectedSubItem.id)"
							@blur="num=>toBlur(num,selectedSubItem.id)">
						</steeper>
						<view class="addToList" v-else @click="addToSelectedList()">
							加入进货清单
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 蒙层 -->
		<view @click="closeSpecCard()">
			<popMask :isShow="isPopUp"></popMask>
		</view>




		<!-- 订单提交完成后对公打款账户信息展示 -->
		<block v-if="applyStatus==3||applyStatus==4||applyStatus==-5">
			<!-- 订单提交完成后对公打款账户信息展示 -->
			<view class="AccountInfo" v-if="true">
				<!-- 顶部状态 -->
				<view class="orderStatus">
					<view class="infoText">
						<view class="iconContent">

						</view>
						<view class="textContent">
							订单已提交完成
						</view>

					</view>
				</view>
				<!-- 下划线 -->
				<view class="subLine">

				</view>
				<!-- 订单打款和账户信息 -->
				<view class="dueFeeInfo">
					<view class="infoContent">
						<view class="feeTitle">
							<view class="text">
								应付款
							</view>
							<view class="fee">
								￥{{Number(uploadFee).toFixed(2)}}
							</view>
						</view>
						<view class="descText">
							对公打款
						</view>
					</view>

					<view class="reSelectGoods" v-if="applyStatus===3" @click="reSelecteGoods()">
						重新选货
					</view>

				</view>

				<view class="accountInfo">
					<view class="infoTitle">
						信息
					</view>

					<view class="accountInfoDetail">
						<view class="accountName">
							<view class="text">
								户名
							</view>
							<view class="value">
								{{accountInfo.accountName}}
							</view>
						</view>

						<view class="accountNumber">
							<view class="text">
								账户
							</view>
							<view class="value">
								{{accountInfo.accountNumber}}
							</view>
						</view>

						<view class="accountBank">
							<view class="text">
								开户行
							</view>
							<view class="value">
								{{accountInfo.bankName}}
							</view>
						</view>
					</view>


					<view class="copyOperate" @click="toCopy(copyText)">
						复制信息
					</view>
				</view>


			</view>


			<!-- 上传对公打款凭证 -->
			<view class="uploadPayment" v-if="true">
				<!-- 第一行上传营业执照的部分 -->
				<view class="upload">
					<view class="uploadTitle">
						上传您的对公打款凭证信息
					</view>
					<view class="uploadOprate" @click="uploadPayment()">
						{{uploadStatusText}}
					</view>
				</view>
				<!-- 下方的上传提示信息 -->
				<view class="hintInfo">
					<view class="iconContentError" v-if="applyStatus===-5">

					</view>
					<view class="iconContentNormal" v-else>
					</view>
					<view class="textContent">
						<view class="erroMsg" v-if="applyStatus===-5">
							<view class="text">
								审核不通过
							</view>
							<view class="text">
								{{errMsg}}
							</view>
						</view>
						<view class="normal" v-else>
							<view class="text">
								请确保上传图片内容清晰
							</view>
							<view class="text">
								1-3三个工作日审核内完成
							</view>
						</view>


					</view>
				</view>


			</view>

			<!-- 提交按钮 -->
			<view class="confirmBtn" @click="uploadConfirm()" v-if="applyStatus==3||applyStatus==-5">
				提交
			</view>
		</block>




		<!-- 弹出的确认框 -->
		<view class="confirmBox" v-if="isPopUpConfirm">
			<view class="titleContent">
				<view class="title">你确认选择成为{{statusText}}吗</view>
				<view class="subTitle">
					服务商类型选择后不可再更改
				</view>
			</view>


			<view class="buttonGroup">
				<button class="cancel" @click="ServiceCancel">再想想</button>
				<button class="confirm" @click="ServiceConfirm">确认</button>
			</view>
		</view>

		<view @click="closeSpecCard()">
			<popMask :isShow="isPopUp||isPopUpConfirm"></popMask>
		</view>


		<!-- 兜底用到的提示卡片 -->
		<view class="mask" v-if="isShowHint"></view>
		<errHintCard :isShowHint="isShowHint" @closeHint="closeHint()"></errHintCard>



		<!-- 打开规格卡片的蒙层-->
		<view class="listMask" v-if="isOpenList" @click="this.isOpenList=false">

		</view>

	</view>
</template>

<script>
	import certifyProgress from '@/components/ServiceCertify/certifyProgress.vue'
	import confirmPop from '@/components/confirmPop.vue'
	import popMask from '@/components/popMask.vue'
	import steeper from '@/components/stepper.vue'
	import * as serviceOrderApi from '@/api/serviceOrder/serviceOrder.js'
	import * as serviceStatusApi from '@/api/serviceStatus/serviceStatus.js'
	import * as ProductApi from '@/api/product/product.js'
	import * as serverAddressApi from '@/api/serverAddress/serverAddress.js'
	import errHintCard from '@/components/goodsChangeHintCard/goodsChangeHintCard.vue'
	import {
		isEmpty
	} from '../../../utils/util'
	export default {
		components: {
			steeper,
			certifyProgress,
			confirmPop,
			popMask,
			errHintCard
		},
		data() {
			return {
				// 用来控制状态的显示文字
				serverUserAccessStatus: -1,
				isChoose: '选择',
				status_1: '服务商类型',
				status_2: '上传',
				status_3: '下单',
				status_4: '上传',


				isShowHint: false,
				// 存储选择成为的服务商状态
				status: 1,
				statusText: '云集服务商',
				isPopUpConfirm: false,
				//目前处于申请的哪个状态
				applyStatus: null,



				// 第二阶段上传营业执照
				// 营业执照url
				businessLicenseUrl: null,
				//控制按钮状态
				customStatusText: '', // 用于自定义显示文字的属性，
				serverAddressList: [],
				addressInfo: '请填写收货地址',
				//显示的收货地址的收货人信息、
				//用来放默认地址的信息
				DefaultaddressData: {},
				errMsg: null,




				// 第三阶段选择商品变量
				//商品列表
				goodsList: [],
				//已选购商品列表
				selectedList: [],
				//是否打开进货清单
				isOpenList: false,
				// 控制蒙层
				isPopUp: false,

				//子商品相关的变量
				subProductList: [],
				// 与添加到补货清单的子商品
				selectedSubItem: {

				},
				// 商品卡片上展示的主商品名字
				productName: '',
				totalPrice: 0,

				//第四阶段上传对公打款凭证
				uploadPayInfo: {
					serverUserInOrderId: null,
					payVoucherUrl: null
				},
				copyText: 'dddd',
				uploadStatus: '立即上传',

				// 第四阶段的展示应该打款的的金额
				uploadFee: null,

				//对公打款账户信息
				accountInfo: {
					accountName: '山东长百中医药科技有限公司',
					accountNumber: '209149470779',
					bankName: '中国银行股份有限公司青岛灵山湾路支行'
				}





			}
		},

		computed: {
			uploadStatusText() {
				if (this.customStatusText) {
					return this.customStatusText;
				}
				if (this.applyStatus === 0 || this.applyStatus === 3) {
					return '立即上传'
				} else if (this.applyStatus === 1 || this.applyStatus === 4) {
					return '审核中'
				} else if (this.applyStatus === -2 || this.applyStatus === -5) {
					return '重新上传'
				}
			}
		},

		onLoad() {
			// 每次进入该页面都需要获取服务商状态,进而渲染不同页面
			this.getServiceInfo()

			// 第三阶段获取商品列表
			this.getGoodsList();

			this.getDefaultAddress();

			this.getFirstInfo();
		},
		onShow() {

			if (this.$globalData.DefaultServerAddressInfo != null) {

				this.DefaultaddressData = this.$globalData.DefaultServerAddressInfo;
				this.addressInfo = this.DefaultaddressData.serverAddressConsigneeProvinceName + this.DefaultaddressData
					.serverAddressConsigneeCityName + this.DefaultaddressData.serverAddressConsigneeDistrictName + this
					.DefaultaddressData.serverAddressConsigneeDetail;

			}




			// this.getDefaultAddress();




		},
		methods: {
			//判断是不是空对象
			isEmpty(obj) {
				return Object.keys(obj).length === 0;
			},


			// 计算折扣
			caluateDiscount(price) {


				if (this.$globalData.userType !== null) {

					if (this.$globalData.userType === 1) {
						return (0.5 * price).toFixed(2)
					} else {
						return (0.4 * price).toFixed(2)
					}
				}
			},
			discountText() {
				if (this.$globalData.userType !== null) {

					if (this.$globalData.userType === 1) {
						return '云集服务商5折'
					} else {
						return '区县级服务商4折'
					}
				}
			},
			serviceDescText() {
				if (this.$globalData.userType !== null) {

					if (this.$globalData.userType === 1) {
						return '云集服务商首次最低进货额1.5万元'
					} else {
						return '区县级服务商首次最低进货额20万元'
					}
				}
			},
			//获取服务商状态
			async getServiceInfo() {
				this.isOpenList = false;
				const res = await serviceStatusApi.getServerUserInfo();
				const resData = res.data.data;
				if (res.data.code === 200) {
					this.serverUserAccessStatus = resData.serverUserAccessStatus;
					this.applyStatus = resData.serverUserAccessStatus
					this.errMsg = resData.serverUserRejectReason;

					if (this.serverUserAccessStatus !== 0) {

						this.status_2 = '已上传'
						if (this.serverUserAccessStatus === 3 || this.serverUserAccessStatus === 4 || this
							.serverUserAccessStatus === -5 || this.serverUserAccessStatus === 5) {
							this.status_3 = '已下单'
							if (this.serverUserAccessStatus !== 3) {
								this.status_4 = '已上传'
							}
						}


					}

					if (resData.serverUserStatus === 1) {
						this.status_1 = '云集服务商'
						this.isChoose = '已选'

					} else if (resData.serverUserStatus === 2) {
						this.status_1 = '区县级服务商'
						this.isChoose = '已选'
					}


				} else {
					this.applyStatus = -1;
				}


			},



			// 第一状态阶段
			// 选择服务商品类
			selectType(status) {
				this.status = status;

			},


			//点击下一步唤起弹出框
			toBeServe() {
				if (this.status == 1) {
					this.statusText = "云集服务商"
				} else {
					this.statusText = "区县级服务商"
				}
				this.isPopUpConfirm = true;

			},
			//确认选择按钮
			async ServiceConfirm() {
				// 调用成为服务商的接口
				const res = await serviceStatusApi.chooseServerUserStatus(this.status);

				if (res.data.code === 200) {
					uni.$showMsg("选择成功")
					this.isPopUpConfirm = false;
					this.isChoose = '已选'
					this.status_1 = this.statusText;
					this.getServiceInfo()




				} else {
					uni.$showMsg("选择失败")
					this.isPopUpConfirm = false;
				}

			},

			//获取服务商状态


			//取消选择按钮
			ServiceCancel() {
				this.isPopUpConfirm = false;

			},

			//上传营业执照
			async uploadLicense() {
				if (this.applyStatus === 1)
					return;
				
				// 上传对公打款凭证信息
				const url = await uni.$chooseImage();



				if (url != null) {
					this.businessLicenseUrl = url;
					this.customStatusText = '重新上传'
				} else {
					return uni.$showMsg('上传失败,请重新选择图片')
				}


			},


			//获取默认地址
			async getDefaultAddress() {
				const res = await serverAddressApi.selectServerAddressBook();

				if (res.data.code === 200 && res.data.data !== null && res.data.data.length !== 0) {

					const resData = res.data.data[0];

					this.addressInfo = resData.serverAddressConsigneeProvinceName + resData
						.serverAddressConsigneeCityName + resData.serverAddressConsigneeDistrictName + resData
						.serverAddressConsigneeDetail;
					this.DefaultaddressData['serverAddressConsigneeName'] = resData.serverAddressConsigneeName;
					this.DefaultaddressData['serverAddressConsigneePhone'] = resData.serverAddressConsigneePhone;
				}



			},

			//跳转服务商地址列表
			toEditServiceAddress() {

				if (this.applyStatus !== 0) {
					return uni.$showMsg('地址提交后不可修改');
				}
				uni.$toPage('/subpkg/ServiceProvider/editServiceAddress/editServiceAddress', {
					firstAddDefaultAddress: true
				});
			},

			// 点击提交认证信息
			async confirmUploadLciense() {
				if (this.applyStatus === 0) {
					if (this.businessLicenseUrl === null) {
						return uni.$showMsg('请先上传打款凭证')
					} else if (isEmpty(this.DefaultaddressData)) {
						return uni.$showMsg('请先上传默认地址')
					}

					const LicenUrlres = await serviceStatusApi.uploadBusinessLicences({
						url: this.businessLicenseUrl
					});

					const updateAddessRes = await serverAddressApi.updateDefaultAddress(this.DefaultaddressData);


					this.customStatusText = '审核中'

				} else if (this.applyStatus === -2) {

					if (this.businessLicenseUrl === null) {
						return uni.$showMsg('请先上传打款凭证')
					}

					const LicenUrlres = await serviceStatusApi.uploadBusinessLicences({
						url: this.businessLicenseUrl
					});
					if (LicenUrlres.data.code === 200) {
						this.customStatusText = '审核中'
					}



				}
				this.getServiceInfo();

			},


			// 第三阶段选货的逻辑
			//管理兜底卡片
			closeHint() {
				this.isShowHint = false;
				this.selectedList = [];
				this.getGoodsList();
			},
			//获取商品列表
			async getGoodsList() {
				const {
					data: res
				} = await ProductApi.selectAll();

				if (res.code !== 200) return uni.$showMsg();
				this.goodsList = res.data;

			},
			//获取子商品列表
			async getSubProductList(id) {
				const res = await ProductApi.selectSubById(id)
				if (res.data.code === 200) {
					this.subProductList = res.data.data;
					this.selectedSubItem = this.subProductList[0];
					this.selectedSubItem.productName = this.productName;
					if (this.getSeleItemNum(this.selectedSubItem.id) !== false) {
						this.selectedSubItem.quantity = this.getSeleItemNum(this.selectedSubItem.id);
					} else {
						this.selectedSubItem.quantity = 1;
					}

					this.isPopUp = true;
				} else if (res.data.code === 320 || res.data.code === 321) {
					this.getGoodsList();
					return uni.$showMsg('商品信息发生变化')
				}
			},
			// 根据传入的id返回对应已经选择商品的数量
			getSeleItemNum(id) {
				const item = Object.values(this.selectedList).find(obj => obj.id === id);
				return item ? item.quantity : false;
			},
			//打开规格卡片
			async openGaugeCard(id, productName) {
				this.isOpenList = false;
				this.productName = productName;

				if (id) {
					this.getSubProductList(id)
				} else {

				}


			},
			//关闭规格卡片
			closeSpecCard() {

				this.isPopUp = false;
			},

			//改变选择的子商品
			changeSubItem(id) {
				this.selectedSubItem = this.subProductList.find(subItem => {
					return subItem.id === id;
				});
				this.selectedSubItem.productName = this.productName;
				if (this.getSeleItemNum(this.selectedSubItem.id) !== false) {
					this.selectedSubItem.quantity = this.getSeleItemNum(this.selectedSubItem.id);
				} else {
					this.selectedSubItem.quantity = 1;
				}
			},

			//把选择的子商品信息添加到补货清单
			addToSelectedList() {
				// 遍历 selectedList 检查是否已存在相同 id 的子商品
				const existingItemIndex = this.selectedList.findIndex(item => item.id === this.selectedSubItem.id);

				if (existingItemIndex !== -1) {
					return uni.$showMsg('已添加过该商品')
				} else {
					// 不存在相同 id 的子商品，将 subInfo 添加到 selectedList

					this.selectedList.push(JSON.parse(JSON.stringify(this.selectedSubItem)));
					this.getSelectedTotalPrice()
					return uni.$showMsg('添加成功')
				}

			},

			//计算商品总价
			getSelectedTotalPrice() {
				this.totalPrice = this.selectedList.reduce((total, item) => {
					// 计算每个子商品的价格，productDetailPrice * quantity
					const itemTotal = item.productDetailPrice * item.quantity;
					// 累加到总和上
					return total + itemTotal;
				}, 0); // 初始总和为 0
			},
			// 在补货清单对子商品的数量进行加减
			toAdd(num, id) {
				const updatedList = this.selectedList.map(item => {
					if (item.id === id) {
						return {
							...item,
							quantity: num
						};
					}
					return item;
				});
				this.selectedList = updatedList;
				this.getSelectedTotalPrice();
			},

			toMinus(num, id) {
				this.selectedList.forEach((item, index) => {
					if (item.id === id) {

						if (num === 0) {
							// 如果 num 等于 1，则从 selectedList 中删除对应的 item
							this.selectedList.splice(index, 1);
						} else {
							// 否则更新 item 的 quantity
							item.quantity = num;
						}
					}
				});
				this.getSelectedTotalPrice();
			},

			toBlur(num, id) {
				this.selectedList.forEach((item, index) => {
					if (item.id === id) {

						if (num === '0') {


							// 如果 num 等于 1，则从 selectedList 中删除对应的 item
							this.selectedList.splice(index, 1);
						} else {
							// 否则更新 item 的 quantity
							item.quantity = num;
						}
					}
				});
				this.getSelectedTotalPrice();
			},

			//计算函数用来计算并展示，进货清单中已选择主产品的数量
			isInSelected(productId) {
				// 使用 reduce 方法累加所有匹配项的 quantity
				const totalQuantity = this.selectedList.reduce((sum, item) => {
					// 确保 quantity 是数字类型
					return item.productId === productId ? sum + Number(item.quantity) : sum;
				}, 0);

				// 如果累加的数量大于 0，则返回总量，否则返回 false
				return totalQuantity > 0 ? totalQuantity : false;
			},


			// 打开补货清单
			operateList() {
				this.isOpenList = !this.isOpenList;
			},
			clearList() {
				if (this.selectedList != null || this.selectedList.length != 0) {
					this.selectedList = [];
					this.getSelectedTotalPrice()
				} else return;
			},


			//提交订单到确认订单页面
			async toOrderConfirm() {
				if (this.selectedList.length === 0) {
					return uni.$showMsg('请选择商品')
				}

				if (this.$globalData.userType === 1) {
					if (this.totalPrice < 15000) {
						return uni.$showMsg('低于最低进货额')
					}
				} else if (this.$globalData.userType === 2) {
					if (this.totalPrice < 200000) {
						return uni.$showMsg('低于最低进货额')
					}
				}

				const ordersDetailSimpleList = this.selectedList.map(item => {
					return {
						productDetailId: item.id,
						productDetailPrice: Number(item.productDetailPrice).toFixed(2),
						productDetailSpecifications: item.productDetailSpecifications,
						productName: item.productName,
						ordersDetailNumber: item.quantity
					};
				});

				const generateOrders = {
					serverUserOrdersThingAmount: this.caluateDiscount(this.totalPrice),
					ordersDetailSimpleList: ordersDetailSimpleList,
					serverUserOrdersRemark: ""
				};


				// 提交首单
				if (generateOrders != null) {
					const res = await serviceStatusApi.addFirstOrder(generateOrders);

					if (res.data.code === 200) {
						this.uploadPayInfo.serverUserInOrderId = res.data.data.serverInOrderId;
					} else if (res.data.code === 320 || res.data.code === 321) {
						this.isShowHint = true;
					}

				}

				this.getServiceInfo();
				this.getFirstInfo();
				//这里进行订单的生成问题
			},


			// 第四阶段上传打款凭证
			async getFirstInfo() {
				const res = await serviceStatusApi.getFirstOrderInformation();

				if (res.data.code === 200) {
					const resData = res.data.data;
					if (resData.serverUserOrdersThingAmount !== null) {
						this.uploadFee = resData.serverUserOrdersThingAmount;
						this.uploadPayInfo.serverUserInOrderId = resData.serverInOrderId;
					}
				}

			},



			async uploadPayment() {
				if (this.applyStatus === 4) return;

				// 上传对公打款凭证信息
				const url = await uni.$chooseImage();


				if (url != null) {
					this.uploadPayInfo.payVoucherUrl = url;
					this.customStatusText = '重新上传'
					return uni.$showMsg('上传成功')


				} else {
					return uni.$showMsg('上传失败,请重新选择图片')
				}




			},
			// 重新选货按钮
			async reSelecteGoods() {
				const res = await serviceStatusApi.resetGoods();
				if (res.data.code === 200) {
					this.getServiceInfo();
					this.uploadPayInfo.payVoucherUrl = null;
					this.uploadPayInfo.serverUserInOrderId = null;
					this.selectedList = [];
					this.getSelectedTotalPrice();
					this.isOpenList = false;
				}
			},

			//最终点提交触发调用后端函数
			async uploadConfirm() {
				if (this.uploadPayInfo.payVoucherUrl != null) {
					const res = await serviceStatusApi.uploadPayVoucher(this.uploadPayInfo)

					if (res.data.code === 200) {
						this.customStatusText = '审核中'
						uni.$showMsg('上传成功,待审核')
						// uni.$toPage('/subpkg/ServiceProvider/replishOrderTransferPage/replishOrderTransferPage')
					} else {
						return uni.$showMsg('上传失败，请稍后重试')
					}
				} else {
					return uni.$showMsg('请先上传对公打款凭证')
				}
				this.getServiceInfo();


			},

			//跳到补货订单页面
			//根据传递的不同flag到不同的页面
			toserviceOrderPage(flag) {
				uni.$toPage('/subpkg/ServiceProvider/serviceOrderRecord/serviceOrderRecord', {
					flag: flag
				});

			},

			// 复制信息
			toCopy() {
				let copyText = '户名:' + this.accountInfo.accountName + '  账户:' + this.accountInfo.accountNumber + '  开户行:' +
					this.accountInfo.bankName;
				uni.$copyText(copyText);
			}



		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: rgba(235, 236, 237, 1);
		width: 100%;
		height: 100vh;
		padding-bottom: 300rpx;
		overflow: scroll;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;

		.listMask {
			background: rgba(0, 0, 0, 0.25);
			width: 100vw;
			height: 100vh;
			position: absolute;
			z-index: 5;

		}



		.mask {
			background: rgba(0, 0, 0, 0.25);
			width: 100vw;
			height: 100vh;
			position: absolute;
		}


		//确认弹出框
		.confirmBox {
			box-sizing: border-box;
			z-index: 99999999;
			width: 494rpx;
			height: 292rpx;
			position: absolute;
			left: 50vw;
			top: 50vh;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);
			transform: translate(-250rpx, -143rpx);
			box-sizing: border-box;
			color: rgba(30, 30, 32, 1);

			.titleContent {
				margin-top: 40rpx;
				width: 100%;
				position: absolute;
				align-items: center;
				display: flex;
				flex-direction: column;

				.title {
					box-sizing: border-box;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(30, 30, 32, 1);
				}

				.subTitle {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(167, 167, 167, 1);
					text-align: center;
					vertical-align: top;
				}
			}


			.buttonGroup {
				width: 384rpx;
				justify-content: space-between;
				display: flex;
				position: absolute;
				padding: 0;
				left: 55rpx;
				bottom: 64rpx;

				button {
					margin: 0;
					width: 158rpx;
					height: 54rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 18rpx;
					font-size: 24rpx;

				}

				.cancel {
					border: 1rpx solid rgba(223, 161, 60, 1);
					;
					color: rgba(223, 161, 60, 1);
					background: rgba(255, 255, 255, 1);
				}

				.confirm {
					color: rgba(255, 255, 255, 1);
					background: rgba(223, 161, 60, 1);
				}
			}

		}




		//选择成为服务商的状态
		.selectServiceArea {
			background-size: cover;

			.banner {
				width: 694rpx;
				height: 270rpx;
				opacity: 1;
				border-radius: 14rpx;
				box-sizing: border-box;
				margin-bottom: 22rpx;
				background-size: cover;
			}

			.cloudServiceDefault {

				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_banner_cloud%20select%20card_default%404x.png');
				background-size: cover;

			}

			.cloudServiceActive {


				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_banner_cloud%20select%20card_presseeeed%404x.png');
				background-size: cover;
			}

			.districtServiceDefault {


				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_banner_county%20select%20card_default%404x.png');
				background-size: cover;
			}

			.districtServiceActive {


				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_banner_county%20select%20card_pressed%404X.png');
				background-size: cover;
			}

			.nextStep {
				position: absolute;
				left: 176rpx;
				bottom: 90rpx;
				width: 400rpx;
				height: 80rpx;
				opacity: 1;
				border-radius: 26rpx;
				background: rgba(223, 161, 60, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(255, 255, 255, 1);
			}

		}


		// 上传营业执照
		.uploadPayment {
			// box-sizing: border-box;
			margin-top: 30rpx;
			width: 694rpx;
			height: 198rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);
			padding-bottom: 24rpx;

			.upload {
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;


				.uploadTitle {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);

				}

				.uploadOprate {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 58rpx;
					opacity: 1;
					border-radius: 18rpx;
					background: rgba(223, 161, 60, 1);
				}
			}


			// 通用样式  
			.hintInfo {
				margin-top: 24rpx;

				display: flex;
				align-items: center;

			}

			.iconContentNormal {
				margin-left: 29rpx;
				margin-right: 14rpx;
				width: 23.07rpx;
				height: 23.07rpx;
				box-sizing: border-box;
				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_icon_prompth_default%404x.png');
				background-size: cover;
			}

			.iconContentError {
				margin-left: 29rpx;
				margin-right: 14rpx;
				width: 23.07rpx;
				height: 23.07rpx;
				box-sizing: border-box;
				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_icon_prompt_default%404x.png');
				background-size: cover;
			}




			.textContent {
				.normal {
					.text {
						color: rgba(167, 167, 167, 1);
						font-size: 24rpx;
						line-height: 38rpx;
					}
				}

				.erroMsg {
					.text {
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 38rpx;
						color: rgba(223, 161, 60, 1);
					}

				}





			}






		}


		// 订单提交完成后对公打款账户信息展示  
		//账户信息
		.AccountInfo {
			box-sizing: border-box;

			width: 694rpx;
			// height: 494rpx;
			opacity: 1;
			background: rgba(249, 250, 252, 1);
			margin-top: 50rpx;
			position: relative;
			padding-bottom: 30rpx;


			// 顶部状态  
			.orderStatus {

				box-sizing: border-box;
				height: 114rpx;

				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 50rpx;



				.infoText {
					display: flex;
					align-items: center;


					.iconContent {
						width: 30rpx;
						height: 30rpx;
						opacity: 1;
						background: url('/static/my/user_icon_success_default@2x.png.png');
						background-size: cover;
					}

					.textContent {
						font-weight: 700;
						margin-left: 20rpx;
						font-size: 32rpx;
						color: rgba(0, 0, 0, 1);
					}


				}

				.checkOrderInfo {
					font-size: 32rpx;
					color: rgba(223, 161, 60, 1);
					font-weight: 700;
				}

			}


			//底部线条
			.subLine {
				left: 50rpx;
				position: absolute;
				width: 594rpx;
				height: 0rpx;
				opacity: 1;
				border: 1rpx dashed rgba(0, 0, 0, 1);

			}

			// 订单打款和账户信息  
			.dueFeeInfo {
               
				position: relative;
				margin-top: 36rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;
				padding-right: 35rpx;

				.reSelectGoods {
					
					
					margin-bottom: 30rpx;
					box-sizing: border-box;
					width: 144rpx;
					height: 56rpx;
					opacity: 1;
					border-radius: 20rpx;
					border: 2rpx solid rgba(0, 0, 0, 1);
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(0, 0, 0, 1);
					display: flex;
					justify-content: center;
					align-items: center;


				}

				.infoContent {
					.feeTitle {
						font-weight: 600;
						display: flex;
						align-items: center;

						.text {}

						.fee {
							margin-left: 16rpx;
						}
					}

					.descText {}
				}


			}

			// 账户  
			.accountInfo {

				box-sizing: border-box;
				margin-top: 40rpx;

				padding: 0 40rpx;
				position: relative;

				.infoTitle {

					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 1);
					font-weight: 600;

				}

				.accountInfoDetail {
					width: 100%;

					display: flex;
					flex-direction: column;
					margin-top: 10rpx;

					.accountName {

						margin-top: 15rpx;

						display: flex;
						align-items: center;
						flex-direction: row;
						justify-content: space-between;

						.text {}

						.value {
							font-size: 28rpx;
							color: rgba(85, 85, 87, 1);

						}
					}

					.accountNumber {
						display: flex;
						align-items: center;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 10rpx;

						.text {}

						.value {

							font-size: 28rpx;
							color: rgba(85, 85, 87, 1);

						}
					}

					.accountBank {

						margin-top: 10rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.text {}

						.value {
							padding-right: 0;
							width: 367rpx;
							font-size: 28rpx;
							color: rgba(85, 85, 87, 1);
						}
					}
				}

				//复制信息按钮
				.copyOperate {
                  
					position: absolute;
					top: -20rpx;
					right: 35rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 144rpx;
					height: 58rpx;
					opacity: 1;
					border-radius: 20rpx;

					border: 2rpx solid rgba(0, 0, 0, 1);
				}
			}


		}

		// 上传对公打款凭证
		.uploadPayment {
			margin-top: 30rpx;

			width: 694rpx;
			height: 198rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);
			padding-bottom: 24rpx;

			.upload {
				box-sizing: border-box;
				padding: 0 50rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;


				.uploadTitle {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);

				}

				.uploadOprate {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 58rpx;
					opacity: 1;
					border-radius: 18rpx;
					background: rgba(223, 161, 60, 1);
				}
			}


			// 通用样式  
			.hintInfo {
				margin-top: 24rpx;

				display: flex;
				align-items: center;

			}

			.iconContentNormal {
				margin-left: 29rpx;
				margin-right: 14rpx;
				width: 23.07rpx;
				height: 23.07rpx;
				box-sizing: border-box;
				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_icon_prompth_default%404x.png');
				background-size: cover;
			}

			.iconContentError {
				margin-left: 29rpx;
				margin-right: 14rpx;
				width: 23.07rpx;
				height: 23.07rpx;
				box-sizing: border-box;
				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_icon_prompt_default%404x.png');
				background-size: cover;
			}


			.textContent {


				.text {
					color: rgba(167, 167, 167, 1);
					font-size: 24rpx;
					line-height: 38rpx;
				}


			}






		}

		//提交按钮
		.confirmBtn {
			position: absolute;
			left: 176rpx;
			bottom: 90rpx;
			box-sizing: border-box;
			width: 400rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 26rpx;
			background: rgba(223, 161, 60, 1);
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		// 地址板块 
		.areaContent {

			margin-top: 30rpx;
			box-sizing: border-box;
			background-color: rgba(255, 255, 255, 1);
			position: relative;
			width: 694rpx;
			height: auto;
			padding: 20rpx 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);
			margin-bottom: 28rpx;
			box-sizing: border-box;
			padding-bottom: 20rpx;

			.iconContent {
				margin-left: 24rpx;
			}

			.areaInfo {

				padding-top: 0rpx;
				box-sizing: border-box;

				.areaTitle {
					box-sizing: border-box;
					margin-top: 0rpx;
					width: 544rpx;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.personInfo {
					box-sizing: border-box;
					box-sizing: border-box;
					margin-top: 16rpx;
					width: 231rpx;
					font-size: 24rpx;
					color: rgba(56, 56, 56, 1);
					white-space: nowrap;

					.name {
						margin-right: 5rpx;
					}

				}
			}

			.icon {

				padding-right: 28rpx;
			}
		}


		// 底部线条样式  
		.bottomLine {
			width: 694rpx;

			display: flex;
			align-items: center;
			color: rgba(167, 167, 167, 1);

			.iconContent {
				margin-right: 10rpx;
				width: 23.07rpx;
				height: 23.07rpx;
				box-sizing: border-box;
				background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/service/user_icon_prompth_default%404x.png');
				background-size: cover;

			}

			// 文字样式  
			.text {
				font-size: 24rpx;
				line-height: 38rpx;
			}
		}

		.confirmOperate {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 176rpx;
			bottom: 90rpx;
			width: 400rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 26rpx;
			background: rgba(223, 161, 60, 1);
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(255, 255, 255, 1);
		}

		// 状态3

		.goodPurchaseArea {
			// 商品区域

			box-sizing: border-box;
			position: absolute;
			bottom: 0;
			width: 750rpx;
			height: 1188rpx;
			opacity: 1;
			border-radius: 30rpx 30rpx, 0rpx, 0rpx;
			background: rgba(235, 236, 237, 1);
			overflow: hidden;

			.goodsList,
			.replishList {
				// 商品列表
				height: calc(100% - 176rpx);
				display: flex;
				flex-direction: column;
				padding-top: 20rpx;
				align-items: center;
				overflow: auto;


				.goodItem {
					// 商品项

					box-sizing: border-box;
					width: 694rpx;
					height: 226rpx;
					opacity: 1;
					border-radius: 14rpx;
					margin-bottom: 20rpx;
					background: rgba(255, 255, 255, 1);
					display: flex;
					padding-bottom: 30rpx;
					padding-right: 23rpx;
					position: relative;

					.goodImage {
						// 商品图片

						margin-top: 14rpx;
						margin-left: 14rpx;
						box-sizing: border-box;
						width: 178rpx;
						height: 178rpx;
						opacity: 1;
						border-radius: 8rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.goodDesc {
						// 商品描述区域
						margin-left: 26rpx;
						margin-top: 10rpx;


						.goodName {

							// 商品名称

							height: 86rpx;
							box-sizing: border-box;
							font-size: 32rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 46.34rpx;
							color: rgba(0, 0, 0, 1);
						}

						.discount {
							// 折扣信息


							margin-top: 20rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(223, 161, 60, 1);
						}

						.priceAndNum {
							// 价格和数量区域
							margin-top: 5rpx;
							display: flex;
							align-items: center;
							flex-direction: row;


							.price {
								display: flex;
								flex-direction: row;
								align-items: center;

								// 价格区域

								.nowPrice {
									// 现价
									box-sizing: border-box;
									height: 54rpx;
									font-size: 36rpx;
									font-weight: 700;
									letter-spacing: 0rpx;
									line-height: 52.12rpx;
									color: rgba(212, 48, 48, 1);
									text-align: left;
									vertical-align: top;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.prePrice {
									// 原价
									margin-left: 15rpx;
									font-size: 24rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 34.76rpx;
									text-decoration-line: line-through;
									color: rgba(167, 167, 167, 1);

								}
							}

							.steeper {
								// 数量调节器区域
								position: absolute;
								bottom: 25rpx;
								right: 23rpx;
								box-sizing: border-box;


								.goodsQuantity {
									width: 128rpx;
									height: 30rpx;
									opacity: 1;
									border-radius: 6rpx;
									background: rgba(212, 48, 48, 1);
									font-size: 20rpx;
									font-weight: 700;
									letter-spacing: 0rpx;
									line-height: 28.96rpx;
									color: rgba(255, 255, 255, 1);
									display: flex;
									justify-content: center;
									align-items: center;
								}

								.specitionSelect {
									margin-top: 4rpx;
									box-sizing: border-box;
									width: 128rpx;
									height: 44rpx;
									opacity: 1;
									border-radius: 6rpx;
									background: rgba(223, 161, 60, 1);
									font-size: 24rpx;
									font-weight: 500;
									letter-spacing: 0rpx;
									line-height: 34.76rpx;
									color: rgba(255, 255, 255, 1);
									display: flex;
									justify-content: center;
									align-items: center;

								}


								// 进货清单的进步器
								.steeperOperate {

									width: 162rpx;
									height: 32rpx;

								}



							}
						}

						.specific {
							margin-top: 4rpx;
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 34.76rpx;
							color: rgba(85, 85, 87, 1);
						}
					}
				}

			}

			.replishListArea {

				box-sizing: border-box;
				margin-bottom: 0;
				position: absolute;
				bottom: 176rpx;
				z-index: 999;
				height: 1012rpx;
				width: 100%;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {
					box-sizing: border-box;
					margin-top: 14rpx;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 38rpx;
					color: rgba(0, 0, 0, 1);
					text-align: right;
					vertical-align: top;

				}

				.delete {
					position: absolute;
					top: 14rpx;
					right: 28rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.icon {
						width: 32rpx;
						height: 32rpx;
						box-sizing: border-box;
						background: url('/static/cart/address_icon_del_default@2px.png.png');
						background-size: cover;
					}

					.textDesc {
						font-size: 26rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 38rpx;
						color: rgba(85, 85, 87, 1);
					}
				}



				.empty {
					position: absolute;
					top: 358rpx;
					width: 288rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					font-size: 36rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 38rpx;
					color: rgba(167, 167, 167, 1);
				}

				.replishList {
					height: 100%;
					overflow: scroll;

				}

			}

			.orderFooter {
				// 订单底部区域
				box-sizing: border-box;
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 176rpx;
				opacity: 1;
				background: rgba(255, 255, 255, 1);
				z-index: 6;


				.title {
					// 标题区域
					position: absolute;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					top: 28rpx;
					left: 24rpx;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);

					.icon {
						box-sizing: border-box;
						width: 48rpx;
						height: 48rpx;

						background-size: cover;

					}

					.up {
						background: url('/static/my/icon_arrow_chevron-up(1).jpg');
						background-size: cover;
					}

					.down {
						background: url('/static/my/icon_arrow_chevron-down(1).jpg');
						background-size: cover;
					}

				}


				.priceArea {

					position: absolute;
					right: 278rpx;
					top: 14rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.totalPrice {
						// 总价

						font-size: 36rpx;
						font-weight: 700;
						letter-spacing: 0rpx;
						line-height: 52.12rpx;
						color: rgba(212, 48, 48, 1);

					}


					.originPrice {
						margin-right: 4rpx;
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 34.76rpx;
						text-decoration-line: line-through;
						color: rgba(167, 167, 167, 1);
						text-align: right;
					}

				}




				.confirmButton {
					// 提交订单按钮
					box-sizing: border-box;
					position: absolute;
					left: 490rpx;
					top: 14rpx;
					width: 230rpx;
					height: 74rpx;
					opacity: 1;
					border-radius: 26rpx;
					background: rgba(212, 48, 48, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(255, 255, 255, 1);


				}


				.serviceDesc {
					position: absolute;

					font-size: 20rpx;
					font-weight: 400;
					left: 25rpx;
					bottom: 68rpx;


				}
			}
		}


		// 商品卡片容器样式
		.specificCard {
			box-sizing: border-box;
			z-index: 99999999;
			position: absolute;
			left: 28rpx;
			bottom: 550rpx;
			width: 694rpx;
			height: 526rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			flex-direction: column;
			padding-left: 30rpx;


			.goodName {
				// 商品名称样式
				margin-top: 30rpx;
				font-size: 36rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 38rpx;
				color: rgba(0, 0, 0, 1);
			}

			.specifiBox {
				// 规格按钮组样式

				margin-top: 60rpx;
				height: 250rpx;
				overflow: auto;

				.title {
					// 规格标题样式
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 38rpx;
					color: rgba(0, 0, 0, 1);
				}

				.speciBtns {
					// 规格按钮样式
					box-sizing: border-box;


					.btnItem {
						// 单个规格按钮样式
						margin-top: 14rpx;
						box-sizing: border-box;
						width: 284rpx;
						height: 50rpx;
						opacity: 1;
						border-radius: 14rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 20rpx;
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 38rpx;

					}

					.unSelected {
						background: rgba(229, 229, 229, 1);
						color: rgba(30, 30, 32, 1);
					}

					.selected {
						background: rgba(223, 161, 60, 1);
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.footOperate {
				box-sizing: border-box;
				position: absolute;
				bottom: 36rpx;
				left: 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				// 底部操作按钮样式

				.totalPrice {
					// 小计样式
					display: flex;
					align-items: center;

					.title {

						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 38rpx;
						color: rgba(0, 0, 0, 1);
					}

					.Price {
						// 小计价格样式
						font-size: 44rpx;
						font-weight: 700;
						letter-spacing: 0rpx;
						line-height: 38rpx;
						color: rgba(212, 48, 48, 1);
					}
				}

				.addToList {
					// 加入进货清单按钮样式
					width: 176rpx;
					height: 48rpx;
					opacity: 1;
					border-radius: 6rpx;
					background: rgba(223, 161, 60, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(255, 255, 255, 1);

				}
			}
		}


	}
</style>